// var
@drawboard-prefix-cls         : x-drawboard;
@drawboard-font-weight        : normal;
@drawboard-font-size-small    : 12px;
@drawboard-font-size          : 14px;
@drawboard-font-size-large    : 16px;
@drawboard-arrow-size         : 10px;

// mixins
.drawboard-size(@font-size) {
  &.@{drawboard-prefix-cls} {
    font-size: @font-size;
  }
}
.drawboard-color(@color) {
  .@{drawboard-prefix-cls}__toolsbar {
    color: @color;
    border-color: tint(@color, 50%);
    &_item {
      background-color: tint(@color, 90%);
    }
    &_label {
      background-color: tint(@color, 70%);
    }
    &_btn {
      &:hover, &.active {
        .@{drawboard-prefix-cls}__toolsbar_btn_shape {
          color: tint(@color, 15%);
        }
        .@{drawboard-prefix-cls}__toolsbar_btn_size {
          background-color: tint(@color, 15%);
        }
        .@{drawboard-prefix-cls}__toolsbar_btn_color {
          transform: scale(1.2);
        }
      }
    }
    &_arrow {
      border-left-color: tint(@color, 50%);
      border-bottom-color: tint(@color, 50%);
    }
  }
}

// styles
.@{drawboard-prefix-cls} {
  display: inline-block;
  font-weight: @drawboard-font-weight;
  user-select: none;
  &__control {
    display: inline-block;
    min-width: 1em;
    min-height: 1em;
    position: relative;
  }
  &__toolsbar {
    position: absolute;
    padding: 2px;
    border-width: 1px;
    border-style: solid;
    background-color: #fff;
    display: flex;
    &_item {
      float: left;
      border: 2px solid transparent;
      background-clip: padding-box;
      display: flex;
    }
    &_label {
      float: left;
      width: 2.4em;
      height: 2.4em;
      box-sizing: content-box;
      padding-inline-start: .3em;
      padding-inline-end: .3em;
      .flex-center;
    }
    &_btn {
      float: left;
      width: 2.4em;
      height: 2.4em;
      cursor: pointer;
      .flex-center;
      &_shape {
        color: tint(@grey-color, 40%);
      }
      &_size {
        display: inline-block;
        border-radius: 50%;
        background-color: tint(@grey-color, 40%);
      }
      &_color {
        display: inline-block;
        width: 1em;
        height: 1em;
        border-radius: .25em;
      }
    }
    &_arrow {
      position: absolute;
      width: @drawboard-arrow-size;
      height: @drawboard-arrow-size;
      background-color: #fff;
      border-width: 1px;
      border-style: solid;
      border-color: transparent;
    }
  }
  .drawboard-size(@drawboard-font-size);
  .drawboard-color(@default-color);
  &-top,
  &-bottom {
    .@{drawboard-prefix-cls}__toolsbar {
      left: 50%;
    }
    &.@{drawboard-prefix-cls}-multiple {
      .@{drawboard-prefix-cls}__toolsbar {
        flex-direction: column;
      }
    }
  }
  &-left,
  &-right {
    .@{drawboard-prefix-cls}__toolsbar {
      top: 50%;
    }
    &.@{drawboard-prefix-cls}-multiple {
      .@{drawboard-prefix-cls}__toolsbar {
        flex-direction: column;
      }
    }
  }
  &-top {
    .@{drawboard-prefix-cls}__toolsbar {
      top: -@drawboard-arrow-size * 1.5;
      transform: translate(-50%, -100%);
      &_arrow {
        left: 50%;
        bottom: -1px;
        transform: translate(-50%, 50%) rotate(315deg);
      }
    }
  }
  &-bottom {
    .@{drawboard-prefix-cls}__toolsbar {
      bottom: -@drawboard-arrow-size * 1.5;
      transform: translate(-50%, 100%);
      &_arrow {
        left: 50%;
        top: -1px;
        transform: translate(-50%, -50%) rotate(135deg);
      }
    }
  }
  &-left {
    .@{drawboard-prefix-cls}__toolsbar {
      left: -@drawboard-arrow-size * 1.5;
      transform: translate(-100%, -50%);
      &_arrow {
        right: -1px;
        top: 50%;
        transform: translate(50%, -50%) rotate(225deg);
      }
    }
  }
  &-right {
    .@{drawboard-prefix-cls}__toolsbar {
      right: -@drawboard-arrow-size * 1.5;
      transform: translate(100%, -50%);
      &_arrow {
        left: -1px;
        top: 50%;
        transform: translate(-50%, -50%) rotate(45deg);
      }
    }
  }
  &-vertical {
    .@{drawboard-prefix-cls}__toolsbar {
      writing-mode: vertical-lr;
    }
  }
}

// styles - more
.@{drawboard-prefix-cls} {
  &-small {
    .drawboard-size(@drawboard-font-size-small);
  }
  &-large {
    .drawboard-size(@drawboard-font-size-large);
  }
  &-brown {
    .drawboard-color(@brown-color);
  }
  &-primary {
    .drawboard-color(@primary-color);
  }
  &-success {
    .drawboard-color(@success-color);
  }
  &-warning {
    .drawboard-color(@warning-color);
  }
  &-danger {
    .drawboard-color(@danger-color);
  }
  &-info {
    .drawboard-color(@info-color);
  }
}
